<template>
  <div class="index_tabs">
    <div class="dselect">
      区划：<select  @change="changeDepCode($event.target.value)">
         <option v-for="item in depCodeList" :key="item.code" :value="item.code">{{ item.desp }}</option>
      </select>
	

	   <el-button
		v-if ="ifshow"
		type="primary" @click="callSaveImageToBackend()"><font style="color: #ffffff;">生成报告</font></el-button>
   
   
   
	</div>
	<div class="dselect_right" v-if="deadlineLoaded">
		截至日期:{{deadline}}
		
	</div>
    <div class="inner">
		<!-- 各地编制情况展示 -->
     <gdbzqkzs :selectCode="selectValue" ref="myChildComponent1"/>
	 <!-- 事业单位编制和领导职数情况 -->
	  <sybz-and-ldzs :selectCode="selectValue" ref="myChildComponent4"/>
	  <!-- 分行业展示事业编制空编排名情况 -->
	  <fhyzs :selectCode="selectValue" ref="myChildComponent5"/>
	 <!-- 人员结构情况展示 -->
	 <ryjgqkzs :selectCode="selectValue" ref="myChildComponent2" />
	<!-- 各区划编制总量展示 -->
	 <qhbzzl :selectCode="selectValue" ref="myChildComponent3"/>
	
	
	<!-- 五年内离退休人数预测 -->
	<fivelt :selectCode="selectValue" ref="myChildComponent6"/>
	

    </div>
  </div>
</template>
<script>
import MySelector from "@/components/MySelector.vue";
import Fhyzs from "@/components/shanxi/Fhyzs.vue";
import Fivelt from "@/components/shanxi/Fivelt.vue";
import Gdbzqkzs from "@/components/shanxi/Gdbzqkzs.vue";
import Qhbzzl from "@/components/shanxi/Qhbzzl.vue";
import Ryjgqkzs from "@/components/shanxi/Ryjgqkzs.vue";
import SybzAndLdzs from "@/components/shanxi/SybzAndLdzs.vue";
import { ref, onMounted } from "vue";
import { useRouter } from 'vue-router';
import Sever from "@/api/selfApi.js";
export default {
  name: "shanxi",
  components: {
    MySelector,
	Sever,
	Fhyzs,
	Fivelt,
	Gdbzqkzs,
	Qhbzzl,
	Ryjgqkzs,
	SybzAndLdzs
  },
  setup() {
	 const { currentRoute } = useRouter();
	 const route = currentRoute.value;
    const selectValue = ref(route.query.depCode||"610000");
	 const ifshow = ref(true);
	const depCode = ref(route.query.depCode||"610000");
	 const depCodeList = ref([]);
	 const deadline = ref("");
	   const deadlineLoaded = ref(false); // 添加一个标志来表示截止日期是否已加载
	const getdepCodeList = async () => {
	
		console.log(depCode.value);
	      // 模拟从指定 URL 获取数据的异步操作
	     await Sever.smz
	       .getdepCodeList({ depCode: depCode.value })
	       .then((res) => {
	         if (res.code == 1) {
	           if (res.data != null) {
	            depCodeList.value=res.data;
	           } else {
	           console.log("getdepCodeList接口无数据！");
	           }
	         } else {
	           console.log("getdepCodeList接口出错！");
	         }
	       })
	       .catch((err) => {
	         console.log(err);
	       });
	    };
		const getDeadline = async () => {
		
			
		      // 模拟从指定 URL 获取数据的异步操作
		     await Sever.smz
		       .getDeadline({  })
		       .then((res) => {
				
		         if (res.code == 1) {
		           if (res.msg != null) {
					  
		            deadline.value=res.msg;
					deadlineLoaded.value = true;
		           } else {
		           console.log("getDeadline接口无数据！");
		           }
		         } else {
		           console.log("getDeadline接口出错！");
		         }
		       })
		       .catch((err) => {
		         console.log(err);
		       });
		    };
		
	onMounted(()=>{
		if(depCode.value.substring(4,6)=='00'&&depCode.value!='610800'){
			ifshow.value=true;
		}else{
			ifshow.value=false;
		}
	   getdepCodeList();
	   getDeadline();
	})
    const changeDepCode = function (value) {
		if(value.substring(4,6)=='00'&&value!='610800'){
			ifshow.value=true;
		}else{
			ifshow.value=false;
		}
      selectValue.value = value;
    };
 const myChildComponent1 = ref(null);
  const myChildComponent2 = ref(null);
   const myChildComponent3 = ref(null);
    const myChildComponent4 = ref(null);
	 const myChildComponent5 = ref(null);
	  const myChildComponent6= ref(null);
  const name= ref("");
    const callSaveImageToBackend = () => {
  //     if (myChildComponent1.value) {
  //       myChildComponent1.value.saveImageToBackend();
		
  //     }
	 //  if (myChildComponent2.value) {
	 //    myChildComponent2.value.saveImageToBackend();
	  		
	 //  }
	  
	 //  if (myChildComponent3.value) {
	 //    myChildComponent3.value.saveImageToBackend();
	  		
	 //  }
	 //  if (myChildComponent4.value) {
	 //    myChildComponent4.value.saveImageToBackend();
	  		
	 //  }
	  
	 //  if (myChildComponent5.value) {
	 //    myChildComponent5.value.saveImageToBackend();
	  		
	 //  }
	 //  if (myChildComponent6.value) {
	 //    myChildComponent6.value.saveImageToBackend();
	  		
	 //  }
	  console.log(depCodeList.value);
	 for (let i = 0; i < depCodeList.value.length; i++) {
	   if (depCodeList.value[i].code == selectValue.value) {
	     name.value = depCodeList.value[i].desp;
	     break;
	   }
	 }
	console.log(selectValue);
	   Sever.smz
	    .getOperatorWord({depCode:selectValue.value })
	    .then((response) => {
	        const blob = new Blob([response.data], { type: 'application/msword' });
	         const url = window.URL.createObjectURL(blob);
	         const link = document.createElement('a');
	         link.href = url;
	         link.download = name.value+'机构编制实名制管理诊断报告.docx';
	         link.click();
	         window.URL.revokeObjectURL(url);
	    })
	    .catch((err) => {
	      console.log(err);
	    });
    
	}
    return { selectValue,depCode, changeDepCode,getdepCodeList,depCodeList,myChildComponent1,
	myChildComponent2,
	myChildComponent3,
	myChildComponent4,
	myChildComponent5,
	myChildComponent6,
	callSaveImageToBackend,
	ifshow,
	 getDeadline,
	 deadline,
	 deadlineLoaded,
	 };
  },
 
};
</script>